<template>
	<div class="main-container"  :class="wrap?'main-wrap-container':'main-no-wrap-container'" id="search-mixin-id">
		<main-content :title="contentTitle">
			<div slot="search" v-if="showSearchBox">
				<SearchBox v-if="showSearchBox" :searchParamsList="searchParamsList" :searchParam.sync="searchParam"
					@searchBoxParams="searchClick" @searchReset="searchReset"></SearchBox>
			</div>
			<div slot="table">
				<!-- 在此处放置表格内容 -->
				<avue-crud ref="repairTable" :data="listData" :showColumn="showColumn" :isSaveColumns="true"
					@selection-change="selectionChange" id="printTable" :option="option" stripe :page.sync="page"
					@on-load="onPageLoad" @row-dblclick="handleRowDBLClick" @sort-change="sortChange"
					@current-row-change="handleCurrentRowChange">
					<template slot-scope="scope" slot="menu">
						<el-button type="opr-primary" size="mini" icon="el-icon-view"
							v-if="hasBtns('repair:view')&&hasButtonPermission('repair:view')"
							@click="viewForm(scope.row)">{{$t("crud.viewBtn")}}</el-button>
						<el-button type="opr-primary" size="mini" icon="el-icon-edit"
							v-if="hasBtns('repair:modify')&&hasButtonPermission('repair:modify')"
							@click="editForm(scope.row)">{{$t("crud.editBtn")}}</el-button>
						<el-button type="opr-primary" size="mini" icon="el-icon-delete"
							v-if="hasBtns('repair:delete')&&hasButtonPermission('repair:delete')"
							@click="deleteForm(scope.row)">{{$t("crud.delBtn")}}</el-button>
					</template>
					<template slot="menuLeft">
					 <el-button type="primary" v-if="hasButtonPermission('repair:add')" icon="el-icon-plus"
							size="small" @click="openForm()">{{$t("crud.addBtn")}}</el-button>
						<el-button type="primary" v-if="hasButtonPermission('repair:batchDelete')" icon="el-icon-delete"
							size="small" @click="batchDelete()">{{$t("forme.editModal.batchDeletionBtn")}}</el-button>
						<el-button type="primary" v-if="hasButtonPermission('repair:print')" icon="el-icon-printer"
							size="small" @click="printForm">{{$t("editorModule.print")}}</el-button>
					</template>
				</avue-crud>
				<el-dialog title="人员选择"  v-dialogDrag :append-to-body="true" width="80%" height="100px"
					:visible.sync="xzflag" :class="isWorkflowForm ? 'work-form-dialog' : ''"
					:show-close="!isWorkflowForm">
					<personnel_selection ref="txForm" v-if="xzflag" :isEdit="isEdit" :disabled="disabled"
						@onChange="dialogChange" :keyValue="keyValue"></personnel_selection>
				</el-dialog>
				<el-dialog title="维修赔偿"  v-dialogDrag :append-to-body="true" width="80%" :visible.sync="flag"
					:class="isWorkflowForm ? 'work-form-dialog' : ''" :show-close="!isWorkflowForm">
					<repairFormView v-if="flag" :isEdit="isEdit" :disabled="disabled" @onChange="dialogChange2"
						:keyValue="keyValue2"></repairFormView>
				</el-dialog>
			</div>
		</main-content>
	</div>
</template>
<script>
	import MainFixed from "@/page/main/MainFixed";
	import authorizeMixin from "@/mixins/authorize";
	import tableOptionMixin from "@/mixins/tableOption"; //table 高度计算
	import tableSearchMixin from "@/mixins/tableSearch"; //table 搜索 
	import displayColumnsMixin from "@/mixins/displayColumns"; //表格展示列显隐保存 
	import MainContent from "@/page/main/MainContent";
	import request from '@/router/axios';
	import {
		baseUrl
	} from '@/config/env';
	import {
		getOrder
	} from '@/util/util';
	import repairFormView from './repairFormView';
	import personnel_selection from './personnel_selection';
	export default {
		name: "repair",
		mixins: [authorizeMixin, tableOptionMixin, tableSearchMixin, displayColumnsMixin],
		components: {
			MainContent,
			repairFormView,
			MainFixed,
			personnel_selection
		},
		data() {
			return {
				btns: [
					'repair:refresh',
					'repair:view',
					'repair:modify',
					'repair:delete',
					'repair:batchDelete',
					'repair:print',
					'repair:add'
				],
				page: {
					pageSize: 20,
					total: 0,
					currentPage: 1,
					layout: "total, prev, pager, next, jumper"
				},
				ids: '',
				listData: [],
				keyValue: '',
				keyValue2: '',
				flag: false,
				xzflag: false,
				isEdit: true, // 查看-不显示按钮,
				disabled: false, // 查看-禁用input,
				isWorkflowForm: false, //默认值 false
				defaultOrderfield: '', //默认排序字段
				defaultOrder: '', //默认排序
				searchParam: {},
				defaultProps: {
					children: 'children',
					label: ''
				},
				option: {
					rowKey: 'fid',
					highlightCurrentRow: true,
					stripe: true,
					addBtn: false,
					tip: false,
					menuWidth: 230,
					border: true,
					page: true,
					selection: true,
					index: true,
					menu: false,
					indexLabel: this.$t('custmerForm.tableNumber'),
					align: 'center',
					menuAlign: 'left',
					delBtn: false,
					editBtn: false,
					column: [{
							sortable: true,
							label: this.$t("姓名"),
							prop: 'identify_name',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("性别"),
							prop: 'gender',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("身份证号"),
							prop: 'identify_id',
							overHidden: true,
						},
						// {
						//     sortable: true,
						//     label: this.$t("事业部"),
						//     prop: 'division',
						//     overHidden: true,
						// },
						{
							sortable: true,
							label: this.$t("车间"),
							prop: 'workshop',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("电话号码"),
							prop: 'phone_number',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("入住日期"),
							prop: 'checkin_date',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("房间号码"),
							prop: 'room_number',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("赔偿金额"),
							prop: 'amounts',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("已赔偿"),
							prop: 'ispayed',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("结算日期"),
							prop: 'pay_date',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("赔偿原因"),
							prop: 'items',
							overHidden: true,
						},
					]
				}
			}
		},
		created() {
			//是否有编辑 查看 删除 发起流程 发起临时流程权限 无则为操作列不显示
			let oprBtns = ['repair:modify', 'repair:view', 'repair:delete', 'repair:createFormFlow',
				'repair:createDesignFlow', 'repair:add'
			];
			let intersection = this.btns.filter((v) => oprBtns.includes(v));
			if (intersection.length > 0) {
				this.option.menu = true
			} else {
				this.option.menu = false
			}
			let querySearchData = [{
					name: '姓名',
					DateField: '',
					field: 'identify_name',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},
				{
					name: '性别',
					DateField: '',
					field: 'gender',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},
				{
					name: '身份证号',
					DateField: '',
					field: 'identify_id',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},
				{
					name: '事业部',
					DateField: '',
					field: 'division',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},
				{
					name: '车间',
					DateField: '',
					field: 'workshop',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},
				{
					name: '电话号码',
					DateField: '',
					field: 'phone_number',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},
				{
					name: '入住日期',
					DateField: '',
					field: 'checkin_date',
					tag: 'el-date-picker',
					avueType: 'datetime',
					lgmark: '',
					"type": "date",
					"format": "yyyy-MM-dd",
					"value-format": "yyyy-MM-dd",
				},
				{
					name: '房间号码',
					DateField: '',
					field: 'room_number',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},
				{
					name: '赔偿金额',
					DateField: '',
					field: 'amounts',
					tag: 'el-input',
					avueType: 'input',
					lgmark: '',
					isFinance: true,
				},
				{
					name: '已赔偿',
					DateField: '',
					field: 'ispayed',
					tag: 'el-radio-group',
					avueType: 'radio',
					lgmark: '',
					dataType: 'dataItem',
					dataItem: 'YesOrNo',
				},
				{
					name: '赔偿原因',
					DateField: '',
					field: 'items',
					tag: 'el-input',
					avueType: 'input-tip',
					lgmark: '',
				},

			]
			this.getSystemSearchList(querySearchData);
			if (this.btns.length > 0) {
				let tempBtns = this.btns.concat(oprBtns).filter((v) => this.btns.includes(v) && !oprBtns.includes(v));
				if (tempBtns.length > 0) {
					this.searchBtns = [...new Set([...tempBtns])];
				}
			}
		},
		methods: {
			handleRowDBLClick(row, event) {
				if (this.hasBtns('repair:modify') && this.hasButtonPermission('repair:modify') && this
					.openDoubleClickEdit) {
					this.editForm(row)
				}
			},
			handleCurrentRowChange(row) {
				this.$refs.repairTable.toggleSelection([row]);
			},
			printForm() {
				let element = window.document.getElementById("printTable");
				setTimeout(() => {
					html2canvas(element, {
						backgroundColor: null,
						useCORS: true,
						windowHeight: document.body.scrollHeight
					}).then(canvas => {
						const url = canvas.toDataURL();
						this.printImg = url;
						printJS({
							printable: url,
							type: "image",
							documentTitle: '打印',
							scanStyles: false,
							repeatTableHeader: false,
							header: null
						});
					});
				}, 1);
			},
			hasBtns(encode) {
				return this.btns.includes(encode);
			},
			/* 获取公司用户数据 */
			getListData() {
				if (!this.searchParam.order) {
					this.searchParam.orderfield = this.defaultOrderfield;
					this.searchParam.order = this.defaultOrder;
				}
				let params = this.changeSearchParams();
				request({
					url: baseUrl + '/repair',
					method: 'get',
					params: params
				}).then(res => {
					this.listData = res.data.data.Rows
					this.page.total = res.data.data.Total;
					for (let i = 0; i < res.data.data.Total; i++) {
						if (res.data.data.Rows[i].ispayed == 0) {
							this.listData[i].ispayed = "否"
							// console.log(this.listData1[i].type)					
						} else {
							this.listData[i].ispayed = "是"
							this.listData[i].pay_date = res.data.data.Rows[i].pay_date.slice(0, 10)
						}
					}
					// for (let i = 0; i < res.data.data.Total; i++) {
					// 	if (res.data.data.Rows[i].gender == 0) {
					// 		this.listData[i].gender = "男"
					// 		// console.log(this.listData1[i].type)					
					// 	} else {
					// 		this.listData[i].gender = "女"
					// 	}
					// }
				})
			},
			/* 页面加载 */
			onPageLoad(page) {
				this.searchParam.limit = page.currentPage;
				this.searchParam.size = page.pageSize;
				this.getListData();
			},
			/*查看*/
			viewForm(val) {
				this.flag = true;
				this.isEdit = false;
				this.disabled = true;
				this.keyValue = val.fid;
				this.keyValue2 = val.fid;
			},
			/* 编辑 */
			editForm(val) {
				this.flag = true;
				this.isEdit = true;
				this.disabled = false;
				this.keyValue = val.fid;
				this.keyValue2 = val.fid;
			},
			/* 打开表单 */
			openForm() {
				if (!this.isWorkflowForm) {
					//不处理工作流表单时候，表单类型重置
					window.localStorage.setItem('systemFormType', 0);
				}
				this.disabled = false;
				this.keyValue = null;
				this.xzflag = true;
				this.isEdit = true;
			},
			/* 删除 */
			deleteForm(val) {
				this.$confirm(this.$t("deletePrompt.promptContent"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/repair/" + val.fid,
						method: "delete",
					}).then((res) => {
						this.getListData()
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("deletePrompt.successDeleted"),
							type: "success",
						});
					});
				});
			},
			/* 分页 */
			sortChange(data) {
				if (data.order) {
					let order = getOrder(data.order);
					this.searchParam.order = order;
					this.searchParam.orderfield = data.prop;
				} else {
					this.searchParam.order = this.defaultOrder;
					this.searchParam.orderfield = this.defaultOrderfield;
				}
				this.getListData()
			},
			/* 弹窗回调 */
			dialogChange() {
				// this.flag = false;
				this.xzflag = false;
				this.$nextTick(() => {
					this.getListData();
				})
			},
			/* 查询 */
			searchClick(params) {
				this.page.currentPage = 1;
				this.searchParam.limit = 1;
				this.searchParam.size = this.page.pageSize;
				this.searchParam = params;
				this.getListData()
			},
			/* 查询表单重置 */
			searchReset() {
				for (const key in this.searchParam) {
					if (this.searchParam[key]) {
						this.searchParam[key] = null;
					}
				}
				this.page.currentPage = 1;
				this.searchParam.limit = 1;
				this.searchParam.size = this.page.pageSize;
				this.getListData();
			},
			selectionChange(list) {
				this.ids = list.map((x) => x.fid).join(',');
			},
			batchDelete() {
				if (!this.ids || this.ids.split(",").length === 0) {
					this.$message.error(this.$t("deletePrompt.noSelected"));
					return;
				}
				this.$confirm(this.$t("deletePrompt.promptContent"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/repair/" + this.ids,
						method: "delete",
					}).then((res) => {
						this.getListData();
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("deletePrompt.successDeleted"),
							type: "success",
						});
					});
				});
			},
		}
	}
</script>
<style scoped>
	.searchBox {
		width: calc(100% - 218px);
		display: inline-block;
	}

	.main-container {
		height: 100% !important;
		padding: 0 8px !important;
	}

	div /deep/ .custom-tree-node span {
		font-size: 14px;
		padding-left: 10px;
	}

	div /deep/ .custom-tree-node i {
		font-size: 12px;
	}

	div /deep/ .el-dialog__body {
		height: 70vh;
		overflow: scroll;
	}
</style>
